<script setup lang="ts"></script>
<template>
  <div class="pay">
    <div class="color">
      <div class="pay-img">
        <img src="../../static/images/pay-success.png" alt="" class="img" />
      </div>
      <div class="pay-title" style="font-weight: 700">
        圈层物联·智能充电桩服务
      </div>
      <div class="pay-price">￥99.00</div>
      <div class="return">
        <button class="button">10s后自动返回订单页面，点击立即返回...</button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.pay {
  width: 100vw;
  height: 100vh;
  background-color: #e0e7f0;
  .color {
    height: 900rpx;
    background-color: #fff;
    padding-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pay-img {
      margin-bottom: 40rpx;
      .img {
        width: 280rpx;
        height: 260rpx;
      }
    }
    .pay-price {
      margin-top: 50rpx;
      margin-bottom: 250rpx;
      color: #db413f;
      font-size: 60rpx;
      font-weight: 700;
    }
    .return {
      .button {
        font-size: 28rpx;
        width: 600rpx;
        height: 98rpx;
        color: #524d48;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #524d48;
      }
    }
  }
}
</style>
